<template>
  <q-card style="min-width: 400px">
    <q-card-section>
      <div class="text-h6">{{ parent ? '添加子菜单' : '添加菜单' }}</div>
    </q-card-section>

    <q-card-section>
      <q-form @submit="onSubmit">
        <q-input v-model="form.name" label="菜单名称" :rules="[(val) => !!val || '必填项']" />

        <q-input v-model="form.icon" label="图标名称" class="q-mt-sm" />

        <q-select v-model="form.type" :options="typeOptions" label="菜单类型" class="q-mt-sm" />

        <q-input v-model="form.path" label="路由路径" class="q-mt-sm" />

        <q-input v-model="form.permission" label="权限标识" class="q-mt-sm" />

        <q-input v-model="form.sort" label="排序" type="number" class="q-mt-sm" />

        <div class="q-mt-md row justify-end">
          <q-btn label="取消" flat v-close-popup />
          <q-btn label="确定" color="primary" type="submit" />
        </div>
      </q-form>
    </q-card-section>
  </q-card>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  formData: Object,
  parent: Object,
})

const emit = defineEmits(['ok', 'hide'])

const form = ref({
  name: '',
  icon: '',
  type: 'menu',
  path: '',
  permission: '',
  sort: 0,
  status: true,
})

const typeOptions = [
  { label: '菜单', value: 'menu' },
  { label: '按钮', value: 'button' },
]

// 如果是编辑模式，初始化表单数据
watch(
  () => props.formData,
  (val) => {
    if (val) form.value = { ...val }
  },
  { immediate: true },
)

const onSubmit = () => {
  emit('ok', form.value)
  emit('hide')
}
</script>
